<template>
    <img ref="authImg" />
</template>

<script setup>
import { ref, onMounted, watch, defineProps } from 'vue';
import request from '@/utils/request'

// 接受的属性
const props = defineProps({
  imgUrl: String
});

const authImg = ref(null);

// 获取图片数据
const getImgUrl = () => {
  request({
    url: props.imgUrl,
    method: 'get',
    responseType: 'blob'
  }).then(res => {
    // 图片加载完成后，将 Blob 数据转换为对象 URL 并设置为 img 的 src
    const objectUrl = URL.createObjectURL(res);
    authImg.value.src = objectUrl;

    // 图片加载完成后，撤销对象 URL，释放内存
    authImg.value.onload = () => {
      URL.revokeObjectURL(objectUrl); // 撤销 URL 对象
    };
  })
};

// 在组件挂载时获取图片
onMounted(getImgUrl);

// 监听 imgUrl 变化，更新图片
watch(() => props.imgUrl, () => {
  getImgUrl();
});
</script>
